import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { queryBannerList,saveBannerInfo,deleteCarouselById} from '../service'
import { Tooltip,Divider,message,Popconfirm,Switch,Button,notification} from 'antd'
import AddForm from './components/AddForm'
import moment from 'moment'

const TableList = () => {
  const actionRef = useRef()
  const [visible, setVisible] = useState(null)
  const [record,setRecord] = useState(null)
  const [loading,setLoading] = useState(false)

  const handleCancel = () => {
    setVisible(false)
    setRecord(null)
  }

  const handleSubmit = (values) => {
    setLoading(true)
    saveBannerInfo(values).then((res) => {
      if(res.flag){
        message.success('操作成功！');
        handleCancel()
        actionRef.current.reload()
      }else{
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
      setLoading(false)
    })
  }

  const updateBanner = (record) =>{
    setVisible(true)
    if(record){
      setRecord(record)
    }
  }

  const delBanner = (id) =>{
    deleteCarouselById(id).then(res => {
      if(res.flag){
        message.success('删除成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error)
      }
    })
  }

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: 'banner标题',
      dataIndex: 'bannerTitle',
    },
    {
      title: '图片地址',
      dataIndex: 'bannerUrl',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:100,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}><a href={text} target="_blank">{text}</a></Tooltip>
      }
    },
    {
      title: '跳转地址',
      dataIndex: 'url',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:100,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}><a href={text} target="_blank">{text}</a></Tooltip>
      }
    },
    {
      title: '是否展示',
      dataIndex: 'isShow',
      hideInSearch: true,
      key:'isShow',
      render: (text) => {
        return <Switch checkedChildren="是" checked={parseInt(text) === 1 ?true:false} unCheckedChildren="否" disabled={true}/>;
      },
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '10%',
      render: (item, record) => (
        <>
          <a onClick={() => updateBanner(record)}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`}
                      onConfirm={() => delBanner(record.id)}
                      okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => queryBannerList(params)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => updateBanner(null)}>新建</Button>,
        ]}
      />
      <AddForm
        record={record}
        loading={loading}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
